<template>
  <div id="task-data-body">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <h1 class="mui-title">任务信息</h1>
      <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="taskEditShow = !taskEditShow" v-if="taskData.task_status == 1 && taskData.task_target == nowUserId">更新</button>
    </header>
    <div class="task-stage-content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">标题：{{ taskData.task_title }}</li>
        <li class="mui-table-view-cell">
          指派：
          <span>{{ taskData.master_name }}</span>
          <span class="sp-ponit">→</span>
          <span class="color-red">{{ taskData.target_name }}</span>
        </li>
        <li class="mui-table-view-cell">
          时间：
          <span>{{ taskData.start_time }}</span>
          <span class="sp-ponit">→</span>
          <span class="color-red">{{ taskData.end_time }}</span>
        </li>
        <li class="mui-table-view-cell task-status">
          状态：
          <span :class="'mui-badge ' + (taskData.task_status == 2 ? ' mui-badge-success' : 'mui-badge-primary')">{{ taskData.task_status == 1 ? "进行中" : "已完成" }}</span>
        </li>
        <li class="mui-table-view-cell task-status-panel">
          进度：
          <Progress :progress="taskData.task_progress || 0"></Progress>
        </li>
        <li
          :class="isContentShow ? 'mui-table-view-cell mui-collapse mui-active' : 'mui-table-view-cell mui-collapse' "
          @click="isContentShow = !isContentShow"
        >
          <a class="mui-navigate-right" href="#">内容</a>
          <div class="mui-collapse-content" id="task-content" v-html="taskData.task_content">
            <!-- {{ taskData.task_content }} -->
          </div>
        </li>
        <li class="mui-table-view-cell mui-collapse mui-active">
          <a class href="#">阶段：</a>
          <div class="mui-collapse-content" id="task-stage">
            <van-steps direction="vertical" :active="0">
              <van-step v-for="taskStageItem in taskStage">
                <h3>{{ taskStageItem.stage_content }}</h3>
                <p><span class="mui-badge sp-task-progress mui-badge-inverted">{{ taskStageItem.task_progress }}</span>{{ taskStageItem.stage_time }}</p>
              </van-step>
            </van-steps>
          </div>
        </li>
      </ul>
    </div>
    <van-popup v-model="taskEditShow"  position="bottom" :style="{ height: '320px','padding-top' : '15px' }">
      <TaskEdit
        :task_id = task_id
        :task_progress = taskData.task_progress
      >
      </TaskEdit>
    </van-popup>
  </div>
</template>
<script>
import Vue from "vue";
import { Step, Steps,Popup } from "vant";
import TaskEdit from "../components/TaskEdit";
Vue.use(Step).use(Steps).use(Popup).use(TaskEdit);
export default {
  data() {
    return {
      nowUserId : -1,
      task_id: "",
      isContentShow: false,
      taskData : {},
      taskStage : [],
      taskEditShow : false
    };
  },
  methods: {
    initTask() {
      this.$axios
        .post(this.$api.task.getTaskById, {
          task_id: this.task_id
        })
        .then(res => {
          this.taskData = res.data.data;
        });
    },
    initStage(){
      this.$axios
        .post(this.$api.task.getStage, {
          task_id: this.task_id
        })
        .then(res => {
          this.taskStage = res.data.data;
        });
    },
    closeTaskEditShow : function() {
      this.taskEditShow = false;
    }
  },
  created() {
    this.nowUserId = JSON.parse(localStorage.getItem("Now_User")).user_id;
    this.task_id = this.$route.query.task_id;
    this.initTask();
    this.initStage();
  }
};
</script>
<style>
.task-stage-content {
  margin-top: 46px;
  background-color: #ffffff;
}
.task-stage-content .mui-table-view-cell:after {
  position: relative;
}
.task-stage-content .mui-table-view-cell.mui-active {
  background-color: #ffffff;
}
.task-stage-content .task-status-panel {
  height: unset;
}
.task-stage-content .task-status-panel .ts-progress {
  left: 70px;
}
.task-stage-content .task-status-panel .ts-progress-status {
  top: -9px;
}
.task-stage-content .task-status span {
  right: unset;
}
#task-content {
  color: #888888;
}
#task-stage .van-step__title h3 {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
span.sp-task-progress{
  margin-right: 6px;
}
.color-red{
  color: red;
}
.sp-ponit{
  margin: 0 12px;
}
</style>